<template>
  <div class="video">
    <van-nav-bar>
      <template #title>
        <div class="vTitle">
          视频
        </div>
      </template>
    </van-nav-bar>
    <div class="videoRoom">
      <van-pull-refresh v-model="Vrefreshing" @refresh="VonRefresh">
        <van-list
          v-model="Vloading"
          :finished="Vfinished"
          finished-text="没有更多了"
          @load="VonLoad"
        >
          <videocell
            v-for="(item, index) in VArr"
            :key="index"
            :item="item"
          ></videocell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import videocell from './videocell'
import { getArticlesApi } from '../../../api/homeindex'
export default {
  components: {
    videocell
  },
  data () {
    return {
      Vrefreshing: false,
      Vloading: false,
      Vfinished: false,
      VArr: [],
      VTime: 0
    }
  },
  created () {
    this.getAritcles(0, Date.parse(new Date()), 0)
  },
  methods: {
    async VonRefresh () {
      this.VArr = []
      await this.getAritcles(0, Date.parse(new Date()), 1)
      this.Vrefreshing = false
    },
    async VonLoad () {
      if (this.VArr.length > 0) {
        await this.getAritcles(0, this.VTime, 0)
      }
      this.loading = false
      this.Vloading = false
    },
    async getAritcles (id, timestamp, top) {
      const Query = {
        channel_id: id,
        timestamp,
        with_top: top
      }
      const res = await getArticlesApi(Query)
      console.log(res)
      res.data.results.forEach(e => {
        this.VArr.push(e)
      })
      this.VTime = res.data.pre_timestamp
    }
  }
}
</script>
<style lang="less" scoped>
.video {
  /deep/ .van-nav-bar__content {
    background-color: #3296fa;
    .vTitle {
      color: white;
      font-size: 18px;
    }
  }
}
</style>
